﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="../css/main.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/cyType.css" media="all">
    <script src="../Scripts/layer/layui.js"></script>
    <link href="../Scripts/layer/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/font-awesome.min.css" media="all">
    <script src="js/PinyinMatch.js"></script>
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script>
        if (!/^http(s*):\/\//.test(location.href))
        {
            alert('请部署到localhost上查看该演示');
        }
    </script>
    <script src="js/transferTool.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
    <div class="s-header">
        <div class="layui-container flex space-between">
            <a class="s-header-a" href="index.html">
                <img src="../image/logo.png" alt="" class="s-header-logo">
            </a>
            <ul class="s-header-menu">
                <li><a href="../index.html" class="active">首页</a></li>
                <li><a href="../login.html">登录</a></li>
                <li><a href="../index.html">FHIM</a></li>
                <li><a href="../WebSys/index.html">后台管理</a></li>
            </ul>
        </div>
    </div>
    <div class="s-subheader" style="">
        <div class="layui-container flex">
            <ul class="flex">
                <li><a href="./transfer.html">穿梭组件</a></li>
                <li><a href="####">排版</a></li>
                <li><a href="####">按钮</a></li>
            </ul>
        </div>
    </div>

    <div class="example">
        <div class="block">
            <div class="layui-container">
                <form class="layui-form">
                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitForm"><i class="fa fa-floppy-o">&nbsp;</i>提交表单</button>
                    <input id="getSelValue" class="layui-btn layui-btn-normal" type="button" value="获取选中值" />
                    <input id="getUnSelValue" class="layui-btn layui-btn-normal" type="button" value="获取未选中值" />
                    <div id="tranferDiv" cyType="transferTool" value="1111210000,1111340000"></div>
                </form>
            </div>
        </div>
    </div>

    <script>
        layui.use('form', function ()
        {
            var form = layui.form;
            //监听提交///保存或修改
            form.on('submit(submitForm)', function (data)
            {
                layer.alert(JSON.stringify(data.field));
                return false;
            });

        });

        var transferTool;
        //config的设置是全局的
        layui.config({
            base: 'js/' //假设这是你存放拓展模块的根目录
        }).use(['transferTool', 'form'], function ()
        {
            transferTool = layui.transferTool;

            transferTool.init({
                elem: "#tranferDiv",
                seletedValue: "1111210000,1111340000",  //已选,变量逗号隔开
                url: 'json/list.json',  //url获取数据
                name: 'province',  //form表单获取的结果值
                disabledValue: "2111120000,111150000,1111340000"   //不可选,变量逗号隔开
            });

        });

		//获取选中的值
        $(document).on("click", "#getSelValue", function ()
        {
            alert(transferTool.transferToolSelectedData);
        });

		//获取未选中的值
        $(document).on("click", "#getUnSelValue", function ()
        {
            alert(transferTool.transferToolUnSelectedData);
        });

    </script>
</body>

</html>